import React, { FC } from 'react'
import { Button, Space, Tooltip } from 'antd'
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
  UpOutlined,
  DownOutlined,
  UndoOutlined,
  RedoOutlined,
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import {
  removeSelectedComponent,
  changeComponentHidden,
  toggleCompontLocked,
  copySelectedComponent,
  pasteCopiedComponent,
  moveComponent,
} from '../../../store/componentsReducer'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
const EditToolbar: FC = () => {
  const dispatch = useDispatch()
  const { selectedId, componentList, selectedComponent, copiedCompoment } = useGetComponentInfo()
  const { isLocked } = selectedComponent || {}
  function handleDelete() {
    console.log('1111')
    dispatch(removeSelectedComponent())
  }
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }))
  }

  function handleLock() {
    dispatch(toggleCompontLocked({ fe_id: selectedId }))
  }
  // 复制
  function copy() {
    dispatch(copySelectedComponent())
  }
  // 粘贴
  function paste() {
    dispatch(pasteCopiedComponent())
  }
  const length = componentList.length
  const selectedIndex = componentList.findIndex(c => c.fe_id === selectedId)
  const isFirst = selectedIndex <= 0
  const isLast = selectedIndex + 1 >= length
  function moveUp() {
    if (isFirst) return
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
  }
  function moveDown() {
    if (isLast) return
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
  }

  function undo() {
    dispatch(UndoActionCreators.undo())
  }
  function redo() {
    dispatch(UndoActionCreators.redo())
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button
          shape="circle"
          onClick={handleDelete}
          icon={<DeleteOutlined></DeleteOutlined>}
        ></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button
          shape="circle"
          onClick={handleHidden}
          icon={<EyeInvisibleOutlined></EyeInvisibleOutlined>}
        ></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          onClick={handleLock}
          type={isLocked ? 'primary' : 'default'}
          icon={<LockOutlined></LockOutlined>}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" onClick={copy} icon={<CopyOutlined></CopyOutlined>}></Button>
      </Tooltip>
      <Tooltip title="黏贴">
        <Button
          shape="circle"
          onClick={paste}
          disabled={copiedCompoment == null}
          icon={<BlockOutlined></BlockOutlined>}
        ></Button>
      </Tooltip>

      <Tooltip title="上移">
        <Button
          disabled={isFirst}
          shape="circle"
          onClick={moveUp}
          icon={<UpOutlined></UpOutlined>}
        ></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          shape="circle"
          onClick={moveDown}
          disabled={isLast}
          icon={<DownOutlined></DownOutlined>}
        ></Button>
      </Tooltip>

      <Tooltip title="撤销">
        <Button shape="circle" onClick={undo} icon={<UndoOutlined></UndoOutlined>}></Button>
      </Tooltip>
      <Tooltip title="重做">
        <Button shape="circle" onClick={redo} icon={<RedoOutlined></RedoOutlined>}></Button>
      </Tooltip>
    </Space>
  )
}
export default EditToolbar
